<template>
    <div class="mainDiv order">
        <el-row :gutter="20" class="rowHead">
            <el-col :span="16" id="el-col-16">
                <el-date-picker v-model="riqi" type="daterange" align="right" placeholder="选择日期范围(默认当天)" :picker-options="pickerOptions2" @change="getList">
                </el-date-picker>
                <el-select v-model="leave" @change="getList">
                    <el-option v-for="(o,index) in leaves" :label="o.txt" :value="o.val" :key="index"></el-option>
                </el-select>
                <el-button type="primary" icon="h-shuaxin1" @click="getList">刷新列表</el-button>
            </el-col>                
            <el-col :span="8" class="flex_end_center">
                <el-input style="width: 300px;" placeholder="搜索员工姓名、工号" v-model="page.search" @keyup.enter.native="getList">
                    <i slot="suffix" class="el-icon-search" style="line-height: 40px;width: 25px;cursor: pointer;" @click="getList"></i>
                </el-input>
                <el-button type="primary" @click="outXlsx" style="margin-left: 5px;">导出数据</el-button>
            </el-col>                      
        </el-row>
        <el-table :data="list" :stripe="true" height="100%">
            <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
            <el-table-column prop="worknum" label="工号"></el-table-column>
            <el-table-column prop="name" label="员工姓名"></el-table-column>
            <el-table-column prop="xjyj" label="现金业绩"></el-table-column>
            <el-table-column prop="xjtc" label="现金提成"></el-table-column>
            <el-table-column prop="khyj" label="卡耗业绩"></el-table-column>
            <el-table-column prop="khtc" label="卡耗提成"></el-table-column>
            <el-table-column prop="sgtc" label="手工提成"></el-table-column>
            <el-table-column prop="qttc" label="其他提成"></el-table-column>
            <el-table-column prop="xjjt" label="现金阶梯"></el-table-column>
            <el-table-column prop="khjt" label="卡耗阶梯"></el-table-column>
            <el-table-column prop="ticheng" label="提成"></el-table-column>
            <el-table-column prop="dixin" label="底薪"></el-table-column>
            <el-table-column prop="zhibiao" label="指标"></el-table-column>
            <el-table-column prop="jiangjin" label="奖金"></el-table-column>
            <el-table-column prop="butie" label="补贴"></el-table-column>
            <el-table-column prop="kouchu" label="扣除"></el-table-column>
            <el-table-column prop="zongji" label="总计"></el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-tooltip content="结算工资" placement="left" :open-delay="800" v-qx="quanxian.jiesuan">
                        <el-button icon="el-icon-h-jiezhang" type="success" size="mini" @click="jiesuan(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center bg-light">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.currentPage" :page-sizes="[15, 30, 50, 100]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import C from '@/common/common.js'

export default {
  name: 'userPayList',
  data () {
    return {
      list: [],
      total: 0,
      page: {
        currentPage: 1,
        pageSize: 15,
        search: ''
      },
      leaves: [{
        txt: '在职',
        val: 0
      }, {
        txt: '离职',
        val: 1
      }],
      leave: 0,
      quanxian: {
        jiesuan: 'paymoney_jiesuan'
      },
      riqi: [new Date(), new Date()],
      pickerOptions2: {
        shortcuts: [{
          text: '本月',
          onClick (picker) {
            const end = new Date()
            const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    jiesuan: async function (row) {
      await C.openBrowserWindow('/userSalary', { id: row.id, time: this.riqi }, { width: 1400, height: 900, useSpa: false, spaModel: 'shop', transparent: true, frame: false })
      this.getList()
    },

    sizeChange: function (val) {
      this.page.pageSize = val
      this.getList()
    },

    currentChange: function (val) {
      this.page.currentPage = val
      this.getList()
    },

    getList: async function () {
      let that = this
      let page = {
        pages: this.page.currentPage,
        limits: this.page.pageSize,
        search: this.page.search,
        zt: that.leave,
        times: that.riqi ? that.riqi : [new Date(), new Date()]
      }
      let data = await C.ajax('/shop/userpay/getuesrpaylist', { page: JSON.stringify(page) }, 'post')
      if (data) {
        data.data.forEach((row) => {
          row.zongji = Number(row.dixin + row.ticheng + row.zhibiao + row.jiangjin + row.butie - row.kouchu).toFixed(2)
        })
        that.list = data.data
        that.total = data.count
      }
    },
    async outXlsx () {
      let that = this
      let page = {
        pages: this.page.currentPage,
        limits: 1000,
        search: this.page.search,
        zt: that.leave,
        times: that.riqi ? that.riqi : [new Date(), new Date()]
      }
      let data = await C.ajax('/shop/userpay/getuesrpaylist', { page: JSON.stringify(page) }, 'post')
      if (data) {
        data.data.forEach((row) => {
          row.zongji = Number(row.dixin + row.ticheng + row.zhibiao + row.jiangjin + row.butie - row.kouchu).toFixed(2)
        })
        let header = {
          worknum: '工号',
          name: '姓名',
          xjyj: '现金业绩',
          xjtc: '现金提成',
          khyj: '卡耗业绩',
          khtc: '卡耗提成',
          sgtc: '手工提成',
          qttc: '其他提成',
          xjjt: '现金阶梯',
          khjt: '卡耗阶梯',
          zc: '（左为提成明细右为工资组成）',
          ticheng: '提成',
          dixin: '底薪',
          zhibiao: '指标',
          jiangjin: '奖金',
          butie: '补贴',
          kouchu: '扣除',
          zongji: '总计'
        }
        let name = C.time(Math.round(new Date(page.times[0]).getTime() / 1000)) + '至' + C.time(Math.round(new Date(page.times[1]).getTime() / 1000)) + '工资数据'
        C.excel(name, header, data.data)
      }
    }
  },
  mounted: function () {
    this.getList()
  }
}
</script>